<template>
  <el-dialog :visible.sync="visible" :title="modalObj.title" :width="modalObj.width" :modal='modalObj.modal'
             center :close-on-click-modal="true"
             :close-on-press-escape="true"
             @closed="$emit('update:visible', false)"
             append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="题目类型" prop="questionType">
        <el-select v-model="form.questionType" placeholder="请选择题目类型">
          <el-option
            v-for="dict in dict.type.el_question_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度" prop="level">
        <el-select v-model="form.level" placeholder="请选择难度">
          <el-option
            v-for="dict in dict.type.el_question_level"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="内容" prop="text">
        <el-input v-model="form.text" type="textarea" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="整题解析" prop="analysis">
        <el-input v-model="form.analysis" type="textarea" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="题库id" prop="repositoryId">
        <el-select v-model="form.repositoryId" placeholder="请选择题库id">
          <el-option
            v-for="dict in dict.type.el_repository"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <div v-show="form.questionType != 3">
        <el-divider content-position="center">候选答案信息{{ form.questionType }}</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddQuestionAnswer">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteQuestionAnswer">删除
            </el-button>
          </el-col>
        </el-row>
        <el-table :data="questionAnswerList" :row-class-name="rowQuestionAnswerIndex"
                  @selection-change="handleQuestionAnswerSelectionChange" ref="questionAnswer">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="序号" align="center" prop="index" width="50"/>
          <el-table-column label="是否正确" prop="status" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status" placeholder="请选择是否正确">
                <el-option
                  v-for="dict in dict.type.el_answer_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="答案内容" prop="text" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.text" placeholder="请输入答案内容"/>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
  <!-- 添加或修改问题题目对话框 -->

</template>

<script>
import {getQuestion, addQuestion, updateQuestion} from '@/api/exam/question'

export default {
  name: 'QuestionEdit',
  dicts: ['el_answer_status', 'el_question_level', 'el_repository', 'el_question_type'],

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    modalObj: {
      type: Object,
      default: false
    }
  },
  data() {
    return {
      // 候选答案表格数据
      questionAnswerList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        questionType: [
          {required: true, message: '题目类型不能为空', trigger: 'change'}
        ],
        level: [
          {required: true, message: '难度不能为空', trigger: 'change'}
        ],
        text: [
          {required: true, message: '内容不能为空', trigger: 'blur'}
        ],
        analysis: [
          {required: true, message: '整题解析不能为空', trigger: 'blur'}
        ],
        repositoryId: [
          {required: true, message: '题库不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.reset()
    this.getData()
  },
  methods: {
    /** 查询问题题目列表 */
    getData() {
      if (this.modalObj.id) {
        getQuestion(this.modalObj.id).then(response => {
          console.log("====================")
          console.log(response)
          this.form = response.data
          this.questionAnswerList = response.data.questionAnswerList
        })
      }
    },
    // 取消按钮
    cancel() {
      this.$emit('update:visible', false)
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        questionType: null,
        level: null,
        text: null,
        createTime: null,
        updateTime: null,
        analysis: null,
        repositoryId: null
      }
      this.questionAnswerList = []
      this.resetForm('form')
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.questionAnswerList = this.questionAnswerList;

          if (this.form.id != null) {
            updateQuestion(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.$emit('update:visible', false)
              this.$emit('handleClose')
            })
          } else {
            addQuestion(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.$emit('update:visible', false)
              this.$emit('handleClose')
            })
          }
        }
      })
    },
    /** 候选答案序号 */
    rowQuestionAnswerIndex({row, rowIndex}) {
      row.index = rowIndex + 1
    },
    /** 候选答案添加按钮操作 */
    handleAddQuestionAnswer() {
      let obj = {}
      obj.status = ''
      obj.text = ''
      this.questionAnswerList.push(obj)
    },
    /** 候选答案删除按钮操作 */
    handleDeleteQuestionAnswer() {
      if (this.checkedQuestionAnswer.length == 0) {
        this.$modal.msgError('请先选择要删除的候选答案数据')
      } else {
        const questionAnswerList = this.questionAnswerList
        const checkedQuestionAnswer = this.checkedQuestionAnswer
        this.questionAnswerList = questionAnswerList.filter(function (item) {
          return checkedQuestionAnswer.indexOf(item.index) == -1
        })
      }
    },
    /** 复选框选中数据 */
    handleQuestionAnswerSelectionChange(selection) {
      this.checkedQuestionAnswer = selection.map(item => item.index)
    }

  }
}
</script>
